<template>
	<div class="page-wrapper" style="width : 100%; height : 100%;">
		<el-container class="page-wrapper">
			<!-- page-header -->
			<el-header class="page-header" heigth="100px">
				<div class="header-title">
					<h1>
						泰山学院管理系统
					</h1>
					<span @click="exitBtn">
						退出登录
					</span>
				</div>
			</el-header>
			<el-container class="page-body">
				<!-- page-body-aside -->
				<el-aside class="page-body-aside">
					<el-menu
						:default-active="activeName"
						background-color="#545c64"
						text-color="#fff"
						active-text-color="#ffd04b"
						@select="selectMenuHandle"
					>
						<template
							v-for="(item, index) in userFuncList.filter(
								(func) => func.func_fid === 0
							)"
						>
							<!--找到一级分类-->
							<!-- index 就是回调函数里的参数 对应的值 -->
							<el-menu-item
								v-if="item.func_key"
								:index="item.func_key"
								:key="index"
							>
								<!--一级分类是叶子节点-->
								<i class="el-icon-menu"></i>
								<span slot="title" v-text="item.func_name"></span>
							</el-menu-item>
							<el-submenu v-else :index="item.func_name" :key="index">
								<template slot="title">
									<i class="el-icon-setting"></i>
									<span v-text="item.func_name"></span>
								</template>
								<el-menu-item
									v-for="(item2, index2) in userFuncList.filter(
										(func) => func.func_fid === item.func_id
									)"
									:index="item2.func_key"
									:key="index2"
								>
									<i class="el-icon-menu"></i>
									<span slot="title" v-text="item2.func_name"></span>
								</el-menu-item>
							</el-submenu>
						</template>
					</el-menu>
				</el-aside>
				<!-- page-body-container -->
				<el-container class="page-body-container">
					<!-- body-container-main -->
					<el-main class="body-container-main">
						<el-tabs
							v-model="activeName"
							type="card"
							closable
							@tab-click="tabClick"
							@tab-remove="tabRemove"
						>
							<el-tab-pane
								:key="item.name"
								v-for="item in editableTabs"
								:label="
									userFuncList.find((func) => func.func_key === item.name)
										.func_name
								"
								:name="item.name"
							>
								<component :is="views[item.name].component"></component>
							</el-tab-pane>
						</el-tabs>
					</el-main>
					<el-footer height="50px" class="body-container-footer">
						<p>版权所有2020-泰山学院</p>
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import views from "@/views";
export default {
	name: "Home",
	data() {
		return {
			views,
			editableTabsValue: "2",
			editableTabs: [],
			tabIndex: 2,
			activeName: "",
			userFuncList: [],
		};
	},
	methods: {
		selectMenuHandle(index) {
			console.log(index);
			if (this.editableTabs.findIndex((item) => item.name === index) !== -1) {
				return;
			}
			this.editableTabs.push({
				title: index,
				name: index,
				conten: index,
			});
			this.activeName = index;
		},
		tabClick(example) {
			this.activeName = example.name;
		},
		tabRemove(name) {
			this.editableTabs.splice(
				this.editableTabs.findIndex((item) => item.name === name),
				1
			);

			if (name === this.activeName)
				this.activeName = this.editableTabs[0].name || "";
		},
		exitBtn() {
			// 退出登录
			// 清除token and 用户名
			this.$cookies.remove("token");
			this.$cookies.remove("username");
			// 跳转到登录页面
			this.$router.replace("/login");
		},
	},
	async created() {
		// 获取菜单
		this.userFuncList = await this.$http({
			method: "post",
			url: "/user/getmenu",
		});
	},
};
</script>

<style lang="stylus">
.el-container
  height 100%
  width 100%
  .page-header
    flex-shrink 0
    line-height 60px
    background-color #303133
    .header-title
      display flex
      align-items center
      justify-content space-between
      h1,span
      color white
      font-size 20px
      span
        font-size 16px
        cursor pointer
        &:hover
          color red
  .page-body
    flex-grow 1
    overflow-y scroll
    .page-body-aside
      flex-shrink 0
      background-color #606266
      .el-menu
        border-right none
    .page-body-container
      flex-grow 1
      .body-container-main
        flex-grow 1
      .body-container-footer
        background-color #909399
        flex-shrink 0
        display flex
        flex-direction column
        justify-content center
        p
          color #ccc
          font-size 16px
          text-align center
</style>
